<template>
	<div id="search-detail" class="w">
	  <!-- 顶部导航 -->
	  <div class="top-nav">
		<!-- 顶部导航 -->
		<el-menu :default-active="defaultActive" router mode="horizontal">
		  <el-menu-item v-for="(item, i) in topnav" :key="i" :index="item.path">
			{{ item.name }}
		  </el-menu-item>
		</el-menu>
	  </div>
	  <!-- 内容 -->
	  <div class="search-content">
		<keep-alive> 
			<router-view :key="router.params.keywords"></router-view>
		</keep-alive>
	  </div>
	</div>
  </template>
  
  <script setup>
  import { ref, onMounted, watch ,inject } from 'vue';
  import { useRoute } from 'vue-router';
  import { useStore } from 'vuex';
  
  // 获取路由对象
  const router = useRoute();
  
  // 接收 inject 的 reload 方法
  const reload = inject("reload");
    const store=useStore();
  
  // 定义 topnav 数据
  const topnav = ref([
	{
	  name: "歌曲",
	  path: `/searchdetail/songres/${router.params.keywords}`,
	},

	{
	  name: "歌手",
	  path: `/searchdetail/singerres/${router.params.keywords}`,
	},
	{
	  name: "专辑",
	  path: `/searchdetail/albumres/${router.params.keywords}`,
	},
	{
	  name: "歌单",
	  path: `/searchdetail/songlistres/${router.params.keywords}`,
	},
	{
	 name: "MV",
	 path: `/searchdetail/mvres/${router.params.keywords}`,
	},
  ]);
  

  const defaultActive = ref("");
  
  // 在组件创建时更新 defaultActive
  onMounted(() => {

	const pathArr = router.path.split("/");
	defaultActive.value = `/${pathArr[1]}/${pathArr[2]}/${router.params.keywords}`;
  });





  // 监听路由变化
watch( () => router.params.keywords,
  (newKeywords) => {
    topnav.value = [
      { name: "歌曲", path: `/searchdetail/songres/${newKeywords}`},
      { name: "歌手", path: `/searchdetail/singerres/${newKeywords}`},
	  { name: "专辑", path: `/searchdetail/albumres/${newKeywords}`},
      { name: "歌单", path: `/searchdetail/songlistres/${newKeywords}`},
	  { name: "MV",  path: `/searchdetail/mvres/${newKeywords}`},
    ];
  },
  { immediate: true }
);
  </script>
  

<style lang="less" scoped>
.w {
	margin: 0 auto;
}
.el-menu {
	border: 0;
}
.el-menu-item {
	color: #303133;
	height: 45px;
	line-height: 45px;
	font-size: 16px;
	background-color: transparent !important; /* 去掉默认背景颜色 */
}
.el-menu--horizontal > .el-menu-item.is-active {
	border-bottom: 3px solid var(--mycompColor);
	font-size: 18px;
	color: var(--mycompColor)!important;
}


/* 去掉鼠标悬停时的背景颜色 */
.el-menu-item:hover {
	background-color: transparent !important; /* 去掉默认的悬停背景颜色 */
	color: var(--mycompColor) !important; /* 悬停时改变文字颜色，防止显示蓝色 */
}
</style>
